<template>
  <div class="list" v-for = '(item,index) in doingvalue'>
    <div class="list-item" :key = item.item>
    <span class="num">{{index+1}}</span>
    <p class="item">{{item.item}}</p>
    <input type="checkbox" name="" @click="todone(item)" >
</div>
  </div>
</template>

<script setup>
import { inject, onMounted, onUpdated, provide, reactive } from 'vue';
// import emiter from '/utils/mitt'
import mitt from 'mitt'
let doingvalue = inject('doing')
provide('doingitem', doingvalue)

let donevalue = reactive([]) 
provide('doneitem',donevalue)
// status 取反
const todone = (e) => {
    e.status = !e.status
    doingvalue.forEach((item,index) => {
        if (item.status) {
            donevalue.push(item)
            doingvalue.splice(index,1)
        }
        console.log(doingvalue)
    })
    // doingvalue.filter((item, index) => {
    //    console.log(item,index)
    // })
    // console.log(doingvalue)
    if (e.status == true) {
        donevalue.push(e)
    }
}


</script>

<style lang="scss">
    .list{
    .list-item{
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-left: 10px solid paleturquoise;
        border-radius: 10px;
        margin: 10px auto;
        height: 30px;
        width: 50%;
    }
    p{
        margin-right: auto;
    }
    }
    .num{
        margin: 0 10px;
    }
</style>